<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .level2 {
            overflow: hidden;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: rgb(15, 86, 238);
            text-align: center;
        }

        .level3 {
            width: 150px;
            height: 150px;
            margin: 50px auto;
            background-color: rgb(240, 8, 248);
            line-height: 150px;
        }
    </style>
</head>

<body>
    <div class="level2">
        <div class="level3">事件的冒泡</div>
    </div>
    <script>

        const level3Obj = document.querySelector(".level3");
        level3Obj.addEventListener("click", function (e) {
            //取消向上冒泡
            alert("level3");
            /* 
                stopPropagation()方法阻止捕获和冒泡阶段中当前事件的进一步传播。
            */
            e.stopPropagation();
            console.log("level3不会向上冒泡了");
        }, false);

        const level2Obj = document.querySelector(".level2");
        level2Obj.addEventListener("click", function (e) {
            alert("level2");
        }, false);

        document.addEventListener("click", function (e) {
            alert("document");
        })

    </script>
</body>

</html>